<template>
	<view class="index">
			<view class="news-item" v-for="item in list" :key="item.ID">
				<view class="news-intr">
					<view class="news-title">
						<text>{{item.Title}}</text>
					</view>
					<view class="news-info">
						<view class="news-ago"><text>8小时前</text></view>
						<view class="news-type"><text>银行</text></view>					
					</view>				
				</view>
				<view class="news-image">
					<!-- src不是用{{}}赋值 -->
					<image :src="website+item.CoverImage" mode=""></image>
				</view>
			</view>
			<view class="load-bottom">
				<text class="loadMore">加载中...</text>
			</view>
			
		</view>
</template>

<script>
	//判断是否下拉，重新加载整个数据，即当前页为第一页
		//list为页面新闻列表，数组
		//当前页码
		export default {
			data() {
				return {
					refreshing: false,
					list: [],
					website:this.$serverUrl,
					fetchPageNum: 1
				}
			},
			methods: {
				getData() {
					uni.request({				
						url: this.$serverUrl + 'yxyj.ashx?Method=Release_Article_app&page=' + (this.refreshing ? 1 : this.fetchPageNum) +
							'&rows=6',
						success: (ret) => {
							if (ret.statusCode !== 200) {
								console.log('失败!');
							} else {
								if (this.refreshing && ret.data.rows[0].id === this.list[0].id) {
									uni.showToast({
										title: '已经最新',
										icon: 'none',
									})
									this.refreshing = false;
									uni.stopPullDownRefresh();
									return;
								}
								//数据更新过，是重新从第一个加载
								if (this.refreshing) {
									this.refreshing = false;
									uni.stopPullDownRefresh()
									this.list = ret.data.rows;
									this.fetchPageNum = 1;
								} else {
									this.list = this.list.concat(ret.data.rows);
									this.fetchPageNum += 1;
								}
							}
						}
					});
				}
			},
			onLoad(){
				this.getData();
			},
			onReachBottom() {
				console.log('滑动到页面底部')
				this.getData();
			},
			onPullDownRefresh() {
				console.log('下拉刷新');
				this.refreshing = true;
				this.getData();			
			}
		}
</script>

<style lang="less">
.index {
	flex: 1;
	width: 750rpx;
	flex-direction: column;
	/* 相当于上下居中 */
	justify-content: center;
	/* 相当于水平居中 */
	align-items: center;
}
.row {
	flex-direction: row;
}
.column {
	flex-direction: column;
}
.load-bottom{
	width: 100%;
	text-align: center;
}
.loadMore {
	font-size: 30upx;
	color: #555;
	margin-bottom: 20upx;
	line-height: 60rpx;	
}
/*新闻列表页*/
.news-item{
	height: 160rpx;
	margin-left:30rpx;
	margin-right:30rpx;
	display: flex;
	font-size: 24rpx;
	font-weight: 400;
	color: #333333;
	padding-top:30rpx;
	padding-bottom: 30rpx;
	border-bottom:2rpx #efefef solid;
}
.news-item .news-intr{
	flex: 2;
	padding-right: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.news-intr .news-title {
	
}
.news-intr .news-info {
	display: flex;
	font-size: 18rpx;
	color: #999999;
}
 .news-info .news-ago{
	text-align: left;
}
 .news-info .news-type{
	text-align: right;
	flex: 2;
}
.news-item .news-image{
	flex: 1;
	max-width:240rpx;
	max-height: 160rpx;
}
.news-item .news-image image{
	max-width: 100%;
	max-height: 100%;
}
</style>
